<template>
  <div ref="codemirror"></div>
</template>

<script lang="ts">
import { defineComponent, markRaw } from 'vue'

import { EditorState, EditorView, basicSetup } from "./basic-setup"

import { javascript } from "@codemirror/lang-javascript"
import { json } from "@codemirror/lang-json"

export default defineComponent({
  name: 'CodeEditorJson',
  components: {
  },
  props: {
    langType: {
      type: String,
      required: true
    },
    docStr: {
      type: String,
      required: true
    },
    height: {
      type: String,
      required: true
    }
  },
  emits: [
  ],
  data() {
    return {
      editorView: null,
    }
  },
  computed: {
  },
  methods: {
    async init() {
      this.editorView = markRaw(new EditorView({
        state: EditorState.create({
          doc: this.docStr,
          extensions: [
            basicSetup,
            EditorView.theme({
              "&": { height: this.height },
              ".cm-scroller": { overflow: "auto" }
            }),
            'json' === this.langType ? json() : javascript()
          ]
        }),
        parent: this.$refs.codemirror
      }))
    }
  },
  mounted() {
    this.init()
  }
})
</script>

<style scoped lang="less">

</style>
